<template>
  <div class="h-full w-full space-y-4">
    <!-- 欢迎信息 -->
    <div class="bg-white rounded-lg shadow-sm p-6">
      <h2 class="text-xl font-bold mb-4">欢迎使用管理系统</h2>
      <p class="text-gray-600">
        这是一个基于 Vue3、TypeScript、Tailwind CSS 和 ElementPlus 的现代化管理系统布局。
      </p>
    </div>

    <!-- 数据统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <el-card class="bg-white p-6" shadow="never">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold">用户数量</span>
            <el-icon><User /></el-icon>
          </div>
        </template>
        <div class="text-4xl font-bold text-center text-green-600">{{ userCount }}</div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 模拟数据
const userCount = ref(1200)

</script>

<style scoped></style>
